<template>
	<view class="address-wrap">
		<view class="address-head u-flex-1 u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20">
			<u-search placeholder="请输入社区名称" :show-action="false" @change="searchBtn" v-model="proNmae"></u-search>
		</view>
		<view class="address-ping2 u-felx-1 u-font-20 margin-top: 10px">
			<span style="margin-left: 50rpx; font-size: 15px; font-weight: 600">
				{{ addressName ? addressName : '当前城市' }}
			</span>
		</view>
		<view @click="searchAdd" class="u-font-28" style="color: #333; padding: 0px 15px 15px">
			<span style="margin-left: 45px; font-size: 16px">
				选择地址
				<img style="width: 16px; margin-right: 10px; margin-top: -1px;float: right;"
					src="../../static/image/down.png" />
			</span>
		</view>
		<!-- <view @click="location()"> 点击获取当前定位 </view> -->
		<view class="address-ping u-felx-1 u-font-20">
			<span style="margin-left: 50rpx; font-size: 15px; font-weight: 600"></span>
		</view>
		<view class="address-ping2 u-felx-1 u-font-20">
			<span style="margin-left: 50rpx; font-size: 15px; font-weight: 600">全部项目</span>
		</view>
		<view @click="toBulid(item)" class="address-sq" style="padding: 0 60px 10px"
			v-for="(item, index) in addressSqList" :key="index" v-show="addressSqList.length > 0">
			<view class="u-font-32" style="color: #333; line-height: 68rpx">{{ item.projectName }}</view>
			<view class="u-font-20" style="color: #aaa; line-height: 32rpx">{{ item.projectLocation }}</view>
		</view>
		<view>
			<lb-picker :list="list" :level="3" mode="multiSelector" :props="myProps" v-model="addressList"
				ref="addRef"></lb-picker>
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				proNmae: null,
				list: [],
				addressList: [],
				addressName: '',
				myProps: {
					label: 'name',
					value: 'id',
					children: 'child'
				},
				searchFlag: true,
				addressSqList: []
			}
		},
		watch: {
			addressList(val) {
				this.idGetName()
				this.getProList()
			}
		},
		created() {
			this.getAddress()
		},
		methods: {
			//2023-09-15 获取当前地址 zwl
			location() {
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					timeout: '30',
					success: function(res) {
						console.log('res:', res)
						let longitude = res.longitude;
						let latitude = res.latitude;
						console.log('经度:', longitude)
						console.log('纬度:', latitude)
						// 创建地图坐标对象
						var point = new plus.maps.Point(res.longitude, res.latitude);
						//静态方法，反向地理编码
						plus.maps.Map.reverseGeocode(point, {}, (event) => {
								var address = event.address; // 转换后的地理位置
								var point = event.coord; // 转换后的坐标信息
								var coordType = event.coordType; // 转换后的坐标系类型
								var reg = /.+?(省|市|自治区|自治州|县|区)/g;
								var addressList = address.match(reg).toString().split(",");
								//注意 因为存在直辖市， 当所在地区为普通省市时，addressList.length == 3，city = addressList[1];当所在地区为直辖市时addressList.length == 2，city = addressList[0];
								let city = addressList.length == 3 ? addressList[1] : addressList[0];
								console.log(addressList);
							},
							function(e) {
								console.log("失败回调", e);
							}
						);
					},
					fail: function(res) {
						console.log(res, '失败的')
					}
				});
			},
			// 获取地址数据
			async getAddress() {
				console.log(1)
				let res = await this.$request.api.address({})
				console.log(res)
				this.list = res.data.data.data || res.data.data
				// console.log(this.list)
				console.log(333)
			},
			// 根据地址Id  获取名
			idGetName() {
				this.addressName = ''
				if (this.addressList) {
					for (let item of this.list) {
						if (item.id == this.addressList[0]) {
							this.addressName += item.name
							if (this.addressList.length > 1) {
								for (let sitem of item.child) {
									if (sitem.id == this.addressList[1]) {
										this.addressName += sitem.name
										if (this.addressList.length > 2) {
											for (let qitem of sitem.child) {
												if (qitem.id == this.addressList[2]) {
													this.addressName += qitem.name
												}
											}
										}
									}
								}
							}
						}
					}
				}
			},
			// 点击选择地址按钮
			searchAdd() {
				this.$refs.addRef.show()
			},
			// 获取项目
			async getProList() {
				let [a, b, c] = this.addressList
				let res = await this.$request.api.pro({
					province: a,
					city: b,
					district: c,
					name: this.proNmae
				})
				this.addressSqList = res.data.data.data || res.data.data
				console.log(this.addressSqList)
			},
			// 搜索的设置
			searchBtn() {
				this.getProList()
			},
			// 跳转至期
			toBulid(val) {
				this.$Router.push({
					path: '/pages/building/building',
					query: {
						name: val.projectName,
						id: val.projectId,
						area: val.projectTotalArea,
						address: val.projectLocation,
						households: val.households,
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.address-wrap {
		width: 100vw;
		height: 100vh;

		.address-head {
			height: 68rpx;
		}

		.address-ping {
			padding: 0 25rpx;
			background: #f4f4f4;
			color: #333333;
		}

		.address-ping2 {
			padding: 20px 14px 10px;
			background: #ffffff;
			color: #333333;
		}

		.address-sq {
			border-bottom: 1px solid #eee;
		}
	}
</style>